<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" id="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>AI互动播放</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/playInterGame.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="./css/animate.css">
    <script src="./js/jq.min.js"></script>
    <style>
        .screen-change {
            position: absolute !important;
            left: 50% !important;
            top: 50% !important;
            overflow: hidden !important;
            z-index: 10 !important
        }

        .screen-change.w {
            height: 100vw;
            width: 100vh;
            transform: translate(-50%, -50%) rotate(90deg);
            -webkit-transform: translate(-50%, -50%) rotate(90deg);
        }

        .screen-change.h {
            height: 100vh;
            width: 100vw;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
        }

        .screen-change.W {
            height: 100vw !important;
            width: 100vh !important;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
        }

        .screen-change.H {
            height: 100vh !important;
            width: 100vw !important;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
        }
    </style>
</head>

<body class="h screen-change">
    <div id="app">
        <div id="audioIcon" @click="playAudio('')">
            <div id="reback" v-show="!hasType"></div>
            <div id="progress">
                <div id="tiao" v-show="!hasType">
                    <div id="jindu"></div>
                </div>
                <div id="numberSty" v-show="!hasType">
                    <i v-text="this.curIndex >= this.interArr.length ? this.interArr.length : this.curIndex"></i>/<span v-text="this.interArr.length"></span>
                </div>
            </div>
            <div id="playAudio">
                <audio :src="info.problemAudUrl" ref="problemAud" autoplay="autoplay" muted id="audioaaa"></audio>
            </div>
        </div>
        <div id="viewConBox" class="H screen-change"
            :style="'background:url(' + info.backImgUrl + ') no-repeat 0%/100% 100%;'" @touchmove="dragMove"
            @touchend="dragUp">
            <!-- <img :src="info.backImgUrl" alt="" id="backImg" /> -->
            <section v-show="type == 7">
                <div id="judgeContainer">
                    <div class="judgeBox" @click="cliDui" id="istrue"
                        style="background:#FFF url(./images/dui.webp) no-repeat 50%/50%;">
                    </div>
                    <div class="judgeBox" @click="cliCuo" id="isfalse"
                        style="background:#FFF url(./images/cuo.webp) no-repeat 50%/45%;">
                    </div>
                </div>
            </section>
            <section v-show="type == 8">
                <div id="selectContainer">
                    <div class="selectBox" v-for="(item, index) in info.answerNum" :key="index"
                        @click="cliRes($event, info.select[index].bool, index)"
                        :style="'background:#FFF url(' + info.select[index].Url + ') no-repeat 0/100% 100%;'">
                        <!-- <img :src="info.select[index].Url" class="selBackImg" /> -->
                        <img v-if="info.select[index].orCli && info.select[index].bool==1"
                            :src="getResult(info.select[index].bool)" class="trueOrfalse" />
                    </div>
                </div>
            </section>
            <section v-show="type == 9">
                <div id="dragContainer">
                    <div id="dragSelect">
                        <div class="dragBox" v-for="(item, index) in info.waitArea" :key="index" @touchstart="dragDown"
                            :style="
                            'background:url(' + item.imgUrl + ') no-repeat 0%/100% 100%;'
                          " :_dragIndex="index"></div>
                    </div>
                    <div id="dragAnswer">
                        <div class="dragBox" v-for="(item, index) in info.resultArea" :key="index" :style="
                            'background:url(' + item.imgUrl + ') no-repeat 0%/100% 100%;'
                          " :_enterIndex="index">
                            <!-- <img :src="item.imgUrl" :alt="item.bool" class="boxImg" /> -->
                        </div>
                    </div>
                    <p id="dragAnswerNum" style="text-align: center;">共有<span style="color: aquamarine;" id="dragNum"
                            v-text="dragHasAnswer"></span>个</p>
            </section>
            <section v-show="type == 10">
                <div id="labelContainer">
                    <div class="labelBox" v-for="(item, i) in info.labelBoxs" :key="i" :isradio="item.isradio"
                        :isUrl="item.url" @click="cliShowFugai"
                        :style="'position: absolute;left:'+item.left+';top:'+item.top+';background:url(' + item.url + ') no-repeat 0%/100% 100%;'"
                        isClicked="0">
                        <span
                            style="position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);">{{item | capitalize}}</span>
                        <!-- v-text='item.isradio==0 ? item.url : ""' -->
                    </div>
                    <div v-show="showFugai" id="fugai" @click="cliNoneFugai">
                        <span v-if="!fugaiIsImg" v-text="fugaiInfo"></span>
                        <img v-if="fugaiIsImg" :src="fugaiInfo" alt="game.webp" />
                        <audio src=""></audio>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <script>
        /**    window.parent.postMessage(true, "*")
         *  判断题 bool为0 选错误答案为对    bool为1 选正确答案为对   0错 1对
         *  选择题 
         *  拖拽题
         *  标注题
         */
        ! function () {
            /*
             *   手机端强制横屏
             */
            var viewport = document.getElementById('viewport');
            var dw = null;
            var screenChange = document.getElementsByClassName('screen-change');

            function a() {
                if (document.body.clientHeight > document.body.clientWidth) {
                    dw = 750; //页面的高度
                    screenChange[0].classList.remove('h');
                    screenChange[0].classList.add('w');
                    screenChange[1].classList.remove('H');
                    screenChange[1].classList.add('W');
                } else if (document.body.clientHeight < document.body.clientWidth) {
                    dw = 1334; //页面的宽度
                }
                viewport.setAttribute('content', 'width=' + dw + ', user-scalable=no')
            }
            a();
            window.addEventListener("orientationchange", function () {
                if (window.orientation == 0) {
                    screenChange[0].classList.remove('h');
                    screenChange[0].classList.add('w');
                    screenChange[1].classList.remove('H');
                    screenChange[1].classList.add('W');
                    dw = 750; //页面的高度
                    viewport.setAttribute('content', 'width=' + dw + ', user-scalable=no')
                } else if (window.orientation == 90) {
                    screenChange[0].classList.remove('w');
                    screenChange[0].classList.add('h');
                    screenChange[1].classList.remove('W');
                    screenChange[1].classList.add('H');
                    dw = 1334; //页面的宽度
                    viewport.setAttribute('content', 'width=' + dw + ', user-scalable=no')
                }
            }, false);
        }(window);
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    interArr: "",
                    curIndex: 0,
                    type: "", // 7判断 8选择 9拖拽 10标注 
                    isTrue: false,
                    // selectIsTrue:false,
                    // dragIsTrue:false,
                    // labelIsTrue:false,
                    truePlayAud: "http://video.mxiaotu.com/sv/40bbf420-1774681e06c/40bbf420-1774681e06c.mp3", // 正确时提示音频
                    /**拖拽参数  9 */
                    isDown: false, //true可以拖拽  false不能
                    dragEle: "", //拖拽操作的元素
                    PX: "", //pagex
                    PY: "", //pageY
                    FpageX: "",
                    FpageY: "",
                    FW: "", //父盒子宽
                    FH: "", //父盒子高
                    SW: "", //子盒子宽
                    SH: "", //子盒子高
                    _dragIndex: "", //被拖拽的元素id（拖拽的）  9
                    /**拖拽参数结束 */
                    showFugai: false, // 10 是否遮罩
                    fugaiIsImg: false, // 10 是否是图片
                    fugaiInfo: '', // 10 覆盖层需要显示什么内容是文字还是图片
                    zhengque: false,
                    dragTureNum: 0,
                    info: "", // ai互动数据列表
                    dragHasAnswer: 0, // 此拖拽互动有几个正确答案
                    hasType: "", //有值得话证明是互动视频与ai游戏组合
                }
            },
            methods: {
                /*
                 *  标注互动
                 */
                cliNoneFugai(e) {
                    //点击取消遮罩
                    if ($(e.target).attr("id")) {
                        //如果点击得对象有id得话，证明是点击得其他地方，则隐藏遮罩
                        this.showFugai = false;
                    }
                },
                cliShowFugai(e) {
                    $(e.target).attr("isClicked", true);
                    // 点击将其素材放大
                    let isradio = $(e.target).attr("isradio");
                    //当israido为2时，证明是音频不需要弹起遮罩
                    if (isradio == 1 || isradio == 0) {
                        this.showFugai = true;
                        isradio == 1 ? this.fugaiIsImg = true : this.fugaiIsImg = false;
                        this.fugaiInfo = $(e.target).attr("isurl");
                    } else if (isradio == 2) {
                        this.playAudio($(e.target).attr("isurl"), true);
                    }
                    let bool = true;
                    $(".labelBox").each(function (i, item) {
                        if ($(item).attr("isClicked") == 0) { //bool有一个为0的话证明还有没有点击的标注
                            bool = false;
                        }
                    });
                    console.log(bool);
                    if (bool) { //为true时证明，所有的标注都被点击过了
                        this.zhengque = true;
                        this.nextInter();
                    }
                },
                /*
                 *拖拽互动   : 按照播放正确音乐的次数来确定，用户是否选择完成
                 */
                dragDown(e) {
                    this.dragEle = e.target;
                    this._dragIndex = $(this.dragEle).attr("_dragIndex");
                    let hasPosition = $(this.dragEle).css("position");
                    //如果拖拽的元素有fixed属性证明其已找到对应的答案，就不支持拖拽了
                    if (hasPosition == 'fixed') {
                        this.isDown = false;
                        return false
                    }
                    this.isDown = true;
                    this.PX = e.changedTouches[0].pageX;
                    this.PY = e.changedTouches[0].pageY;
                    this.SW = $(e.target).outerWidth();
                    this.SH = this.SW; //长宽一样  正方形
                    this.FW = $(this.$refs.dragOutBox).outerWidth();
                    this.FH = $(this.$refs.dragOutBox).outerHeight();
                    $(this.dragEle).css({
                        position: "fixed",
                        left: this.PX + "px",
                        top: this.PY + "px",
                    });
                },
                dragMove(e) {
                    let clientX = e.changedTouches[0].pageX;
                    let clientY = e.changedTouches[0].pageY;
                    if (this.isDown) {
                        this.moveEle = e.target;
                        $(this.dragEle).css({
                            position: "fixed",
                            "z-index": "1",
                            left: this.PX + clientX - this.PX + "px",
                            top: this.PY + clientY - this.PY + "px",
                            width: this.SW + "px",
                            "padding-bottom": this.SW + "px"
                        });
                    }
                },
                dragUp(e) {
                    let endClientX = e.changedTouches[0].clientX;
                    let endClientY = e.changedTouches[0].clientY;
                    let enterBox = $("#dragAnswer .dragBox");
                    let _enterIndex = "";
                    let w = "";
                    let top = "";
                    let left = "";
                    $.each(enterBox, function (i, item) { //手机端无移入事件，所以只能获取被移入元素的left top来判断手指松开是否是在其范围内
                        top = $(item).offset().top;
                        left = $(item).offset().left;
                        w = $(item).width(); //宽高一致
                        if (endClientX > left && endClientX < left + w && endClientY > top &&
                            endClientY < top + w) {
                            _enterIndex = $(item).attr("_enterIndex");
                            return false
                        }
                    });
                    if (this.isDown) {
                        this.isDown = false;
                        // console.log(_enterIndex, this._dragIndex);
                        let bool = false;
                        if (!this.info.resultArea[_enterIndex]) { //如果获取不到，则回到原位置
                            $(this.dragEle).css({
                                position: "",
                                left: "",
                                top: "",
                                "z-index": "1",
                            });
                            return false
                        }
                        this.info.resultArea[_enterIndex].bind.forEach((item, index) => {
                            if (this._dragIndex == item) {
                                bool = true;
                            }
                        });
                        if (bool) { //如果为true则播放正确的音频
                            this.playAudio(this.truePlayAud);
                            let random = parseInt(Math.random() * 40); //用来控制移入的元素不会有一些部分出现在外面，又可以不使元素重合
                            // console.log(w);
                            $(this.dragEle).css({
                                position: "fixed",
                                left: w / 8 + left + random + "px",
                                top: w / 8 + top + random + "px",
                                transform: "scale(0.7)"
                            });
                            this.dragTureNum++;
                            if (this.dragTureNum == this.dragHasAnswer) {
                                this.zhengque = true;
                                this.nextInter();
                            }
                        } else { //如果false则回到原先得位置
                            $(this.dragEle).css({
                                position: "",
                                left: "",
                                top: "",
                                "z-index": "1",
                            });
                        }
                    }
                },
                /*
                 *选择互动
                 *  @getResult 获取的是此选项对应的图片信息是正确的图片还是错误的
                 */
                getResult(bool) {
                    var url =
                        bool == "1" ?
                        "./images/dui.webp" :
                        "./images/cuo.webp";
                    return url;
                },
                cliRes(e, bool, index) {
                    this.info.select[index].orCli = true;
                    //点击正确播放音频 错误抖动
                    let thisele = e.target;
                    if (bool == "0") {
                        //错误
                        thisele.classList.add("animate__animated", "animate__wobble");
                        setTimeout(function () {
                            //因为要保证他动画效果完成
                            thisele.classList.remove("animate__animated", "animate__wobble");
                        }, 1000);
                    } else {
                        this.playAudio(this.truePlayAud);
                        let newArr = [];
                        this.info.select.forEach((item, index) => {
                            if (item.bool == 1) { //bool为1代表此选项正确，当所有的正确选项都出来之后就能直接正确
                                newArr.push(item)
                            }
                        })
                        // console.log(newArr);
                        this.zhengque = newArr.every((item, i) => {
                            return item.orCli == true;
                        })
                        // console.log(this.zhengque);
                        if (this.zhengque) {
                            this.info.select.forEach((item, index) => {
                                item.orCli = true
                            })
                        }
                        this.nextInter();
                    }
                },
                /*
                 * 判断互动 bool为0 选错误答案为对    bool为1 选正确答案为对   0错 1对
                 */
                cliDui(e) {
                    e.stopPropagation();
                    if (this.info.bool == "1") {
                        //代表对
                        this.playAudio(this.truePlayAud);
                        this.zhengque = true;
                        this.nextInter();
                        // if (this.zhengque) {
                        //     this.zhengque = false;
                        //     this.curIndex++;
                        //     this.getOneInterInfo(this.interArr[this.curIndex]);
                        // }
                    } else {
                        document
                            .getElementById("istrue")
                            .classList.add("animate__animated", "animate__wobble");
                        setTimeout(function () {
                            //因为要保证他动画效果完成
                            document
                                .getElementById("istrue")
                                .classList.remove("animate__animated", "animate__wobble");
                        }, 1000);
                    }
                },
                cliCuo(e) {
                    e.stopPropagation();
                    if (this.info.bool == "0") {
                        //代表对
                        this.playAudio(this.truePlayAud);
                        this.zhengque = true;
                        this.nextInter();
                        // if (this.zhengque) {
                        //     this.zhengque = false;
                        //     this.curIndex++;
                        //     this.getOneInterInfo(this.interArr[this.curIndex]);
                        // }
                    } else {
                        document
                            .getElementById("isfalse")
                            .classList.add("animate__animated", "animate__wobble");
                        setTimeout(function () {
                            //因为要保证他动画效果完成
                            document
                                .getElementById("isfalse")
                                .classList.remove("animate__animated", "animate__wobble");
                        }, 1000);
                    }
                },
                /**
                 *控制问题音频播放暂停
                 */
                playAudio(src, pauseing) {
                    let problemAud = this.$refs.problemAud;
                    let isplay = problemAud.paused; //判断暂停true 播放false
                    if (pauseing) { //pauseing参数为true的话证明点击播放/暂停  而不是重新播放
                        isplay ? problemAud.play() : problemAud.pause();
                        return false;
                    }
                    if (src) {
                        problemAud.src = src;
                        problemAud.load();
                        problemAud.pause();
                        isplay = problemAud.paused; //暂停true 播放false
                    } else if (!src && isplay) {
                        //没有传src参数并且音频未播放才执行赋值
                        problemAud.src = this.info.problemAudUrl;
                        problemAud.load();
                    }
                    if (this.info.problemAudUrl && isplay) {
                        problemAud.play(); // pause() 关闭
                    } else {
                        problemAud.pause();
                    }
                },
                getInfo() {
                    // 是针对于互动视频页面的跳转到此页面进行播放
                    console.log(location.href);
                    let href = location.href;
                    if (!href.indexOf("?")) {
                        return false
                    }
                    let hasParams = href.slice(href.indexOf("?") + 1);
                    console.log(hasParams);
                    let type = hasParams.split("&")[0].split("=")[1];
                    if (!type) {
                        return false;
                    }
                    console.log(type);
                    this.hasType = type;
                    let _interId = hasParams.split("&")[1].split("=")[1];
                    // console.log(type, _interId);
                    this.type = type;
                    let that = this;
                    $.ajax({
                        type: "get",
                        url: `http://139.186.155.167/S9vC7rYOo4.php/small/resource/edit?id=${_interId}`,
                        success: function (res) {
                            console.log(res);
                            that.info = JSON.parse(res.data.context);
                        }
                    });
                },
                getOneInterInfo(_interId) {
                    if (this.curIndex >= this.interArr.length) {
                        console.log("您已完成作业");
                        return false;
                    }
                    let that = this;
                    $.ajax({
                        type: "get",
                        url: `http://139.186.155.167/S9vC7rYOo4.php/small/resource/edit?id=${_interId}`,
                        success: function (res) {
                            console.log(res);
                            if (res.data.length == 0 || !res.data.context) {
                                return false;
                            }
                            that.info = JSON.parse(res.data.context);
                            that.type = res.data.type;
                        }
                    });
                },
                getAllInter() {
                    // 大闯关课件模块 （多个ai互动游戏播放  手机端点击进入的）
                    let href = location.href;
                    let id = href.split("=")[1];
                    let that = this;
                    if (id) {
                        $.ajax({ //获取的是互动集合的数据
                            type: "get",
                            url: `http://139.186.155.167/S9vC7rYOo4.php/small/resource/edit?id=${id}`,
                            success: function (res) {
                                console.log(res);
                                if (res.data.length == 0 || !res.data.context) {
                                    return false;
                                }
                                that.interArr = JSON.parse(res.data.context);
                                // console.log(that.interArr);
                                if (res.data.type == 12) { //等于12证明是多个ai游戏组合
                                    that.getOneInterInfo(that.interArr[that.curIndex]);
                                } else {
                                    that.info = JSON.parse(res.data.context);
                                    that.type = res.data.type;
                                    that.hasType = "";
                                }
                            }
                        });
                    }

                },
                /** 每一个互动用户答对后，都要走这个函数 */
                nextInter() {
                    console.log(this.zhengque, !this.hasType);
                    if (this.zhengque && !this.hasType) { //hasType false是ai互动
                        this.curIndex++;
                        console.log(this.curIndex, this.interArr.length);
                        // if (this.curIndex >= this.interArr.length) {
                        //     alert("您已完成作业");
                        //     return false;
                        // }
                        this.zhengque = false;
                        if (this.hasType) { // 仅适用于互动视频：使互动正确后就暂停声音
                            this.$refs.problemAud.pause();
                        }
                        let that = this;
                        //为了使正确得音频播放完成
                        console.log(222);
                        $(this.$refs.problemAud).unbind('ended').bind('ended', function () {
                            console.log(111);
                            that.getOneInterInfo(that.interArr[that.curIndex]);
                            $(that.$refs.problemAud)
                        .unbind(); //播放结束完，要将此事件去除，否则下个音频播放时，会造成正确不正确都会调取getOneInterInfo接口
                        });
                        return false;
                    }
                    // console.log(this.hasType);
                    if (this.zhengque &&this.hasType) { //hasType 有值（true）证明是互动视频
                    console.log("发送成功消息-----------");
                    $(this.$refs.problemAud).unbind('ended').bind('ended', function () {
                        window.parent.postMessage(true, "*"); //像父页面即互动视频播放页面发送信息
                    });
                    }

                }
            },
            watch: {
                type() {
                    if (this.type == 9) {
                        // 判断此拖拽互动的有几个正确答案
                        let arr = [];
                        this.info.resultArea.forEach((item, i) => {
                            arr = arr.concat(item.bind);
                        });
                        this.dragHasAnswer = new Set(arr).size
                    }
                },
                info() {
                    if (this.type == 9) {
                        // 判断此拖拽互动的有几个正确答案
                        let arr = [];
                        this.info.resultArea.forEach((item, i) => {
                            arr = arr.concat(item.bind);
                        });
                        this.dragHasAnswer = new Set(arr).size
                    }
                },
                /*
                 * @curIndex  interArr   都是为了对应的显示进度条
                 */
                curIndex: {
                    handler(nV, oV) {
                        $("#jindu").css("width", 100 / this.interArr.length * (nV) + "%");
                    }
                },
                // interArr: {
                //     handler(nV, oV) {
                //         $("#jindu").css("width", 100 / nV.length * (this.curIndex) + "%");
                //     }
                // }
            },
            beforeCreate() {
                // $("#app").css({
                //     width:$(window).height(),
                //     height:$(window).width()
                // });
            },
            created() {
                // this.interArr = [27792, 27791, 27790];
                // this.getOneInterInfo(this.interArr[this.curIndex]);
                let href = location.href.split("=");
                // console.log(href);
                if (href.length == 2) { //如果地址被分成长度为 2的数组代表是从手机端进入的（小兔大闯关模式）
                    this.getAllInter();
                    return false;
                }
                this.getInfo(); //如果地址被分成长度不为2的数组代表是从互动视频进入的
            },
            mounted() {},
            filters: {
                capitalize: function (value) { // 用于标注组件上
                    if (value.isradio == 0) { //证明此标注是文本
                        return value.url
                    } else if (value.isradio == 2) {
                        return value.name
                    }
                }
            }
        });
        // info: {
        //     backImgName: "", //背景图名称
        //     backImgUrl: "", //背景图地址
        //     problemAudName: "", //问题音频
        //     problemAudUrl: "http://video.mxiaotu.com/sv/1109f068-1775d41aab5/1109f068-1775d41aab5.mp3", //问题音频地址
        //     name: "", //互动名称
        //     labelBoxs: [{
        //             url: "11", //地址会是视频3（先不用做） 音频2 图片1  文本0
        //             isradio: "0", //地址会是视频3（先不用做） 音频2 图片1  文本0
        //             name: "",
        //             left: "50%",
        //             top: "50%"
        //         },
        //         {
        //             url: "http://video.mxiaotu.com/image/default/060E49689A5C48459A027110E59C35AA-6-2.png", //地址会是视频3（先不用做） 音频2 图片1  文本0
        //             isradio: "1", //地址会是视频3（先不用做） 音频2 图片1  文本0
        //             name: "",
        //             left: "30%",
        //             top: "10%"
        //         },
        //         {
        //             url: "http://video.mxiaotu.com/sv/10bab236-1775b234ab3/10bab236-1775b234ab3.mp3", //地址会是视频3（先不用做） 音频2 图片1  文本0
        //             isradio: "2", //地址会是视频3（先不用做） 音频2 图片1  文本0
        //             name: "",
        //             left: "70%",
        //             top: "10%"
        //         }
        //     ],
        // },
        // info: {
        //     backImgName: "", //背景图名称
        //     backImgUrl: "http://video.mxiaotu.com/image/default/060E49689A5C48459A027110E59C35AA-6-2.png", //背景图地址
        //     problemAudName: "", //问题音频
        //     problemAudUrl: "http://video.mxiaotu.com/sv/10bab236-1775b234ab3/10bab236-1775b234ab3.mp3", //问题音频地址
        //     name: "", //互动名称
        //     /**答案  1为正确  0为错误*/
        //     waitArea: [
        //         //待选区
        //         {
        //             imgUrl: "http://video.mxiaotu.com/image/default/060E49689A5C48459A027110E59C35AA-6-2.png", //图片地址
        //             bool: "", //是否正确
        //         },
        //         {
        //             imgUrl: "http://video.mxiaotu.com/image/default/060E49689A5C48459A027110E59C35AA-6-2.png", //图片地址
        //             bool: "", //是否正确
        //         },
        //         {
        //             imgUrl: "http://video.mxiaotu.com/image/default/060E49689A5C48459A027110E59C35AA-6-2.png", //图片地址
        //             bool: "", //是否正确
        //         },
        //         {
        //             imgUrl: "http://video.mxiaotu.com/image/default/060E49689A5C48459A027110E59C35AA-6-2.png", //图片地址
        //             bool: "", //是否正确
        //         },
        //         {
        //             imgUrl: "http://video.mxiaotu.com/image/default/060E49689A5C48459A027110E59C35AA-6-2.png", //图片地址
        //             bool: "", //是否正确
        //         },
        //     ],
        //     resultArea: [{
        //         id: "",
        //         imgUrl: "http://video.mxiaotu.com/image/default/060E49689A5C48459A027110E59C35AA-6-2.png", //图片地址
        //         bind: [1] //  [0,1,2,3...]  绑定得是id
        //     }, {
        //         id: "",
        //         imgUrl: "http://video.mxiaotu.com/image/default/060E49689A5C48459A027110E59C35AA-6-2.png", //图片地址
        //         bind: [0, 1] //  [0,1,2,3...]  绑定得是id
        //     }, ],
        // },
        // info: {
        //     backImgName: "", //背景图名称
        //     backImgUrl: "", //背景图地址
        //     problemAudName: "", //问题音频
        //     problemAudUrl: "", //问题音频地址
        //     answerNum: 3, //答案的数量  即选项的数量
        //     name: "", //互动名称
        //     /**答案  1为正确  0为错误*/
        //     select: [{
        //             bool: "1",
        //             orCli: false,   
        //             Url: "http://video.mxiaotu.com/image/default/060E49689A5C48459A027110E59C35AA-6-2.png",
        //         },
        //         {
        //             bool: "1",
        //             orCli: false,
        //             Url: "http://video.mxiaotu.com/image/default/060E49689A5C48459A027110E59C35AA-6-2.png",
        //         },
        //         {
        //             bool: "0",
        //             orCli: false,
        //             Url: "http://video.mxiaotu.com/image/default/060E49689A5C48459A027110E59C35AA-6-2.png",
        //         },
        //     ],
        // }
        // info: {  
        //     backImgName: "", //背景图名称
        //     backImgUrl: "", //背景图地址
        //     problemAudName: "", //问题音频
        //     problemAudUrl: "", //问题音频地址
        //     name: "", //互动名称
        //     bool: "1", // 判断对错  0错 1对   判断有正确错误2个选项,这个0 1 是代表的选项 1是正确选项是正确的   0是错误选项是正确的
        // },
    </script>
</body>

</html>